<template>
	<view class="home-container">
		<view class="notice">
		    <u-notice-bar icon='volume-fill' :text="noticeText" bgColor='#f4f1f8' color='#ab90d3'></u-notice-bar>
		</view>
		<view class="card-list">
			<view class="card-item" v-for="(item,index) in cardList" :key="index">
				<view class="top">
					<image :src="item.beforeImage"></image>
					<view class="beforeText">修复前</view>
					<view class="afterText">修复后</view>
					<view class="line"></view>
					<image :src="item.afterImage"></image>
				</view>
				<view class="bottom">
					<view class="title">{{item.title}}</view>
					<view class="btn" @click="chooseFunc(item)">点击前往</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { login } from '../../api/user'
export default {
	data() {
		return {
			noticeText: '修复旧影还原时光印记，增强画质焕新视觉之美',
			cardList: [
			  {
				// icon: require('@/assets/icon/edit.svg'),
				title: '图像编辑',
				type: 'edit',
				description: '调整色彩、亮度，裁剪图像，实现基本编辑',
				url: '/image/imageLayout/edit',
				afterImage: require('./image/editRes.png'),
				beforeImage: require('./image/editRegion.png'),
				// afterImage: 'https://qiniu-image.akfang.cn/editRes.png',
				// beforeImage: 'https://qiniu-image.akfang.cn/editRegion.png',
			  },
			  {
				// icon: require('@/assets/icon/koutu.svg'),
				title: '抠图',
				type: 'koutu',
				description: '智能识别主体，一键抠图，轻松分离背景',
				url: '/image/imageLayout/koutu',
				afterImage: require('./image/cutRes.jpeg'),
				beforeImage: require('./image/cutOrigin.jpeg'),
			  },
			  {
				// icon: require('@/assets/icon/repair.svg'),
				title: '图像修复',
				type: 'repair',
				description: '修复图像中的瑕疵，如斑点、划痕等',
				url: '/image/imageLayout/repair',
				afterImage: require('./image/repaireRes.png'),
				beforeImage: require('./image/repaireOrigin.png'),
			  },
			  {
				// icon: require('@/assets/icon/strong.svg'),
				title: '图像增强',
				type: 'strong',
				description: '提升图像质量，增强细节和对比度',
				url: '/image/imageLayout/strong',
				afterImage: require('./image/strongRes.png'),
				beforeImage: require('./image/strongOrigin.png'),
			  },
			  {
				// icon: require('@/assets/icon/border.svg'),
				title: '边缘提取',
				type: 'border',
				description: '识别图像边缘，用于图像分割和特征提取',
				url: '/image/imageLayout/border',
				afterImage: require('./image/borderRes.jpeg'),
				beforeImage: require('./image/borderRegion.jpeg'),
			  },
			 //  {
				// title: '图像矢量化',
				// type: 'vector',
				// description: 'c，便于编辑和缩放',
				// url: '/image/imageLayout/vector',
				// afterImage: require('./image/shiRes.svg'),
				// beforeImage: require('./image/shiOrigin.jpeg'),
			 //  },
			  {
				// icon: require('@/assets/icon/vector.svg'),
				title: '图像上色',
				type: 'color',
				description: '精准复原独特的民族图案，重现其文化精髓',
				url: '/image/imageLayout/vector',
				afterImage: require('./image/colorRes.jpeg'),
				beforeImage: require('./image/colorOrigin.jpg'),
			  },
			],
		}
	},
	methods: {
		chooseFunc(item) {
			uni.navigateTo({
				url: `/func/pages/Processing/${item.type}`,
				success() {
					
				}
			})
		}
	}
}
</script>

<style lang="scss">
.home-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	height: 100vh;
	width: 100%;
	padding-top: 10px;
	background-color: #f1f1f1;
	.notice {
		width: 100%;
	}
	.card-list {
		width: 90%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.card-item {
			width: 48%;
			margin-bottom: 20px;
			display: flex;
			flex-direction: column;
			height: 130px;
			border-radius: 6px;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(229, 229, 229, 0.5);
			background-color: #ffffff;

			.top {
				flex: 1;
				display: flex;
				justify-content: space-around;
				position: relative;
				image {
					width: 50%;
					height: 100%;
					object-fit: fill;
				}
				
				.afterText, .beforeText {
					position: absolute;
					background-color: rgba(91, 92, 97, 0.6);
					color: #fff;
					font-size: 11px;
					padding: 4px;
				}
				.beforeText {
					top: 0;
					left: 0;
				}
				.afterText {
					top: 0;
					right: 0;
				}
			}
			.bottom {
				display: flex;
				justify-content: space-between;
				height: 26px;
				align-items: center;
				padding: 0 10px;
				.title {
					font-size: 12px;
					color: #5c5a54;
				}
				.btn {
					font-size: 12px;
					color: #fff;
					padding: 0px 6px;
					border-radius: 8px;
					background-color: #c177f2;
				}
			}
		}
	}
}
</style>